<template>
    <div ref="MapView" class="MapView">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br><br>
            <h5>** 目前只加载了台湾地区的 90M 精度高程信息</h5>
            <br>
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]

export default {
    data() { return { SenceMode: '3D', } },
    watch: { SenceMode(value) { map.SenceMode = value; }, },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, { mapOptions: { senceMode: this.SenceMode } });
        map.addProviders(mapConfig);
        
        // 添加高程信息资源 （项目服务中，包含 layer.json 的高程服务数据包）
        map.addTerrainProvider('http://192.168.3.106:88/terrain/');


        var viewer = map.getViewer();

        // 将摄像机指定到有高程的位置
        // (Demo中只包含台湾地区高程信息)
        viewer.camera.setView({
            destination: new Cesium.Cartesian3(-3106999.608831722, 4995971.292023478, 2577896.42558424),
            orientation: {
                heading: 5.131851682750282,
                pitch: -0.4371307465345353,
                roll: 0,
            }
        });

        // 渲染一个贴地的矩形图片 ( 平铺渲染 )
        viewer.entities.add({
            id: 'rectangle',
            rectangle: {
                // 创建一个矩形
                coordinates: Cesium.Rectangle.fromCartesianArray([
                    simpleMap.util.CreatePosition({ latitude: 24.612898778193305, longitude: 121.17992104399973 }),
                    simpleMap.util.CreatePosition({ latitude: 23.809382098858613, longitude: 120.85854891614383 }),
                ]),
                // 平铺
                fill: true,
                // 贴地渲染
                extrudedHeight: Cesium.RELATIVE_TO_GROUND,
                // 材质贴图
                material: new Cesium.ImageMaterialProperty({
                    image: '../image/Cesium_Logo_Color.jpg',
                    color: new Cesium.Color(0, 1, 1, 0.3),
                })
            }
        });

    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.MapView {
    width: 100%;
    height: 100%;
}

.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>